<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>  
<%@ include file="/WEB-INF/page/public/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout Layui</title>
    <link rel="stylesheet" href="${ctx }/layui/css/layui.css">
    <style type="text/css">
    /* 数据表格复选框正常显示 */
	.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
	     top: 50%;
	     transform: translateY(-50%);
	}
    </style>
    <script src="${ctx }/layui/layui.js"></script>
    <script>  
        var ctx = "${ctx}";  
    </script> 
    
</head>
<body style="overflow:auto">

<div style="margin: 20px;">
    <blockquote class="layui-elem-quote list_search">

        <div class="layui-inline">
            <button class="layui-btn" id="addMenu">添加菜单</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" id="editMenu">编辑菜单</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-danger" id="delMenu">删除菜单</button>
        </div>
        <button class="layui-btn layui-btn-primary">（不选中为添加顶级菜单，选中添加子菜单）</button>
    </blockquote>

    <div ><table class="layui-hidden" id="treeTable2" lay-filter="treeTable2"></table></div>
</div>
<script type="text/html" id="barTools">
    <a class="layui-btn layui-btn-xs" lay-event="add" >新增下级</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['element', 'layer', 'form', 'upload', 'treeGrid','jquery'], function () {
        var treeGrid = layui.treeGrid, form = layui.form,//很重要
        $ = layui.jquery,table = layui.table;
        var treeTable =treeGrid.render({
        	id:'treeTable2'
            ,elem: '#treeTable2'
            ,url:ctx+'/cmscategory/data'
            ,cellMinWidth: 100
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'parentId'//树形父id字段名称
            ,treeShowName:'name'//以树形式显示的字段
            ,cols: [[
                {field: 'id',title: ' ',templet:"#radioTpl",unresize:true}
                ,{field: 'id',title: 'ID ',width:80}
                ,{field:'name', title: '菜单名',width:220}
                ,{field:'image', title: '图标',templet: '#iconTpl'}
                ,{field:'module',title: '模块',width:120}
                ,{field:'inMenu',title: '是否导航菜单',templet: '#menuTpl'}
                ,{ width: 220, align: 'center',title: '操作',toolbar: '#barTools' }
            ]]
            ,page:false
        });
        

        //radio选中监听
         form.on("radio(radiodemo)",function(obj) {
		    layer.tips(this.value+" "+this.name+":"+obj.elem.checked,obj.othis);
		  });

        treeGrid.on('tool(treeTable2)',function (obj) {
            if(obj.event === 'del'){//删除行
                if(obj.data.id==1){
                    layer.msg("不允许操作此数据！",{icon: 5});
                    return;
                }
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:ctx+'/cmscategory/delById/'+obj.data.id,
                        type : "get",
                        success : function(d){
                            if(d.code==0){
                                //obj.del();
                                table.reload('listTable', {})
                            }else{
                                layer.msg("权限不足，联系超管！",{icon: 5});
                            }
                        }
                    })
                    layer.close(index);

                });
            }else if(obj.event==="add"){//添加行
                alert(obj.data.id);
                var index = layui.layer.open({
                    title : "添加",
                    type : 2,
                    content : ctx+"/cmscategory/addcmscategory/"+obj.data.id,
                    success : function(layero, index){
                        layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }
                })
                //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
                $(window).resize(function(){
                    layui.layer.full(index);
                })
                layui.layer.full(index);
            }else if(obj.event==="edit"){//添加行
                var index = layui.layer.open({
                    title : "编辑信息",
                    type : 2,
                    content : ctx+"/cmscategory/editcmscategory/"+obj.data.id, //这里content是一个普通的String
                    success : function(layero, index){
                        layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }
                })
                //改变窗口大小时，重置弹窗的高度，防止超出可视区域（如F12调出debug的操作）
                $(window).resize(function(){
                    layui.layer.full(index);
                })
                layui.layer.full(index);
            }

        });

        $("#addMenu").click(function(){
            var a = $("input[name='id']:checked").val();
            if(a==undefined||a!=1){
                if(a==undefined){
                    a=0;
                }
                //添加顶级菜单
                layer.open({
                    type: 2,
                    title:"添加菜单",
                    area: ['470px', '360px'],
                    content:ctx+"/cmscategory/addcmscategory/"+a //这里content是一个普通的String
                })
            }else{
                layer.msg("此菜单不允许操作！",{icon: 5});
                return;
            }

        })

        $("#editMenu").click(function(){
            var a = $("input[name='id']:checked").val();
            if(a==undefined){
                layer.msg("请选择要操作的菜单！",{icon: 5});
                return;
            }
            if(a==1){
                layer.msg("不允许操作的菜单！",{icon: 5});
                return;
            }
            //添加顶级菜单
            layer.open({
                type: 2,
                title:"编辑菜单",
                area: ['470px', '360px'],
                content:ctx+"/cmscategory/editcmscategory/"+a //这里content是一个普通的String
            })

        })

        $("#delMenu").click(function(){
            var a = $("input[name='id']:checked").val();
            if(a==undefined){
                layer.msg("请选择要操作的菜单！",{icon: 5});
                return;
            }
            if(a==1){
                layer.msg("不允许删除！",{icon: 5});
                return;
            }
            layer.confirm('真的删除行么', function(index){
                $.ajax({
                    url:ctx+'/cmscategory/delById/'+a,
                    type : "post",
                    success : function(d){
                        if(d.code==0){
                            layer.msg("删除成功！",{icon: 1});
                            setTimeout(function(){
                                parent.location.reload();
                            },500);
                        }else{
                            layer.msg(d.msg,{icon: 5});
                        }
                    }
                })
                layer.close(index);
            });

        })


    });
</script>


<script type="text/html" id="menuTpl">
 		 {{#  if(d.inMenu === '1'){ }}
   			是
		{{#  } else{ }}
			否
  		{{#  } }}
	</script>
	<script type="text/html" id="radioTpl">
  <input type="radio" name="id" value="{{d.menuId}}" title=" " lay-filter="radiodemo">
</script>
</body>
</html>